<template>
	<!--  用户主页-->
	<div v-if="!homeType">
		<div class="content">
			<div class="user-pic" @click="handlePreviewImg(proxy.$baseUrl + userHomeInfo.imgUrl)">
				<img :src="proxy.$baseUrl + userHomeInfo.imgUrl" alt="" />
			</div>
			<div class="name">{{ userHomeInfo.nick }}</div>
			<div class="sign">{{ userHomeInfo.sign }}</div>
			<div class="user-info">
				<span>性别: {{ userHomeInfo.sex }}</span>
				<span v-if="userHomeInfo.birthday">生日: {{ userHomeInfo.birthday }}</span>
				<span v-if="userHomeInfo.start">星座: {{ userHomeInfo.start }}</span>
				<span>电话: {{ userHomeInfo.phone }}</span>
			</div>
			<!-- 图标 -->
			<div class="pop-contact" v-show="friendState == 1">
				<div class="message" @click="handleMessage">
					<svg
						t="1689688028031"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="21296"
						width="15"
						height="15"
					>
						<path
							d="M892 141.6H134c-37.6 0-68 30.4-68 68v534.5c0 37.6 30.4 68 68 68h109.1l18.5 82c8.6 38 55.1 52.5 83.7 26l117-108H892c37.6 0 68-30.4 68-68V209.6c0-37.5-30.5-68-68-68zM314 507.8c-31.8 0-57.5-25.8-57.5-57.5s25.8-57.5 57.5-57.5c31.8 0 57.5 25.8 57.5 57.5s-25.7 57.5-57.5 57.5z m209.4 4c-31.8 0-57.5-25.8-57.5-57.5s25.8-57.5 57.5-57.5c31.8 0 57.5 25.8 57.5 57.5s-25.7 57.5-57.5 57.5z m209.4 0c-31.8 0-57.5-25.8-57.5-57.5s25.8-57.5 57.5-57.5c31.8 0 57.5 25.8 57.5 57.5s-25.7 57.5-57.5 57.5z"
							p-id="21297"
							fill="#ffffff"
						></path>
					</svg>
				</div>
				<div class="phone">
					<svg
						t="1689687311236"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="12916"
						width="15"
						height="15"
					>
						<path
							d="M620.678799 713.607618c1.842881-1.177396 22.165765-14.026373 28.103938-17.660945 10.954905-6.70604 20.015737-11.773963 29.12776-15.869254 63.732974-29.434908 119.94085-8.651303 194.270392 79.346273 45.969647 54.467377 59.586492 102.791817 41.823164 145.843569-13.207315 32.148038-38.700505 54.313804-84.055858 81.752257-2.917895 1.740499-29.025379 17.149033-35.731419 21.346707-105.60733 66.036576-347.587867-85.079681-521.637756-343.185429-174.459419-258.822424-219.610007-534.74269-112.620517-601.700706l14.077565-9.060833 15.357343-10.084655C243.400068 8.859139 278.056472-5.320808 319.11177 1.74357c40.952915 7.16676 75.865275 37.881447 105.351374 93.833367 62.19724 118.405116 48.478013 174.561801-31.533745 225.599371-5.733408 3.736954-26.209866 16.227593-28.103938 17.456181-19.606208 12.285875 13.616844 94.652425 90.81309 209.167014 78.168877 115.794368 143.539968 179.169004 164.937865 165.859306z"
							p-id="12917"
							fill="#ffffff"
						></path>
					</svg>
				</div>
				<div class="video">
					<svg
						t="1689687973398"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="17502"
						width="15"
						height="15"
					>
						<path
							d="M647.725 840.897c0 0 93.091 0 93.091-93.091L740.816 282.353c0-93.091-93.091-93.091-93.091-93.091L93.091 189.262c0 0-93.091 0-93.091 93.091l0 465.453c0 93.091 93.091 93.091 93.091 93.091L647.725 840.897zM795.041 371.115 795.041 660.72l228.956 180.177L1023.997 189.263 795.041 371.115z"
							fill="#ffffff"
							p-id="17503"
						></path>
					</svg>
				</div>
			</div>
			<div class="pop-contact" v-show="friendState == 2">
				<div class="add-friend" @click="handleAddFriend">
					<svg
						t="1695875812618"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="5764"
						width="15"
						height="15"
					>
						<path
							d="M320 307.2c6.4-95.2 84.8-172.8 180-178.4 111.2-6.4 204 81.6 204 192 0 105.6-85.6 192-192 192-110.4 0-199.2-93.6-192-205.6zM575.2 768c0-72.8 40.8-136.8 100.8-168.8C616 584 556 576 511.2 576 384 576 128 640 128 768v96c0 17.6 14.4 32 32 32h464c-30.4-33.6-48.8-78.4-48.8-128zM896 736h-96v-96h-64v96h-96v64h96v96h64v-96h96v-64z"
							p-id="5765"
							fill="#ffffff"
						></path>
					</svg>
				</div>
			</div>
			<div class="pop-contact" v-show="friendState == 0">
				<span style="font-size: 15px; color: #8c8c8c; margin-top: 20px">好友申请中</span>
			</div>
		</div>
	</div>
	<!--  群聊主页-->
	<div v-else class="chatHome">
		<div class="content">
			<div class="main">
				<div class="group-info-one">
					<!--        群头像-->
					<div class="pic" @click="handlePreviewImg(proxy.$baseUrl + groupHomeInfo.group?.imgUrl)">
						<img :src="proxy.$baseUrl + groupHomeInfo.group?.imgUrl" />
					</div>
					<div class="info-left">
						<div class="group-name">{{ groupHomeInfo.group?.groupName }}</div>
						<div class="group-number">群号：{{ groupHomeInfo.group?.groupNumber }}</div>
						<div class="create-time">创建时间：{{ groupHomeInfo.group?.creatTime }}</div>
					</div>
					<!--        群聊按钮-->
					<div class="group-btn" @click="handleGroupChat">
						<el-icon color="#fff" size="20" v-show="groupState == 1">
							<ChatDotSquare />
						</el-icon>
						<el-icon color="#fff" size="20" v-show="groupState == 2">
							<Plus />
						</el-icon>
						<span v-show="groupState == 0" style="font-size: 12px; color: #fff">申请中</span>
					</div>
				</div>
				<!-- 群简介 -->
				<div class="group-sign">
					<el-icon class="document" size="16">
						<Document />
					</el-icon>
					<div class="title">群介绍</div>
					<div class="sign-text" @click="signDialog = true">
						{{ groupHomeInfo.group?.sign }}
						<el-icon size="15">
							<ArrowRight />
						</el-icon>
					</div>
				</div>
				<!--群成员-->
				<div class="group-user">
					<div class="header">
						<el-icon size="16">
							<User />
						</el-icon>
						<div class="title">群成员 ({{ groupHomeInfo.groupUser?.length }}人)</div>
					</div>
					<div class="group-user-list">
						<div class="group-user-pic" v-for="(item, index) in groupHomeInfo.groupUser" :key="index">
							<img :src="proxy.$baseUrl + item.userId?.imgUrl" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--    群成员-->
		<el-dialog v-model="signDialog" title="群介绍" width="45%">
			<div style="padding: 30px 20px; box-sizing: border-box">{{ groupHomeInfo.group?.sign }}</div>
		</el-dialog>
	</div>

	<!--  好友/群头像预览-->
	<el-image-viewer v-if="showPreviewImg" :url-list="urlList" @close="closePreviewImg" />
</template>
<script setup lang="ts">
import $bus from '@/utils/eventBus'
import { useUserInfoStore } from '@/store/modules/user'
import { reqAddFriend, reqAddGroup, reqGetGroupContactHomeInfo, reqGetUserInfo } from '@/api/contact'
import { IGroupInfoType, IUserInfoType } from '@/api/contact/type'
import utils from '@/utils'
import { baseRes } from '@/api/type'
import { useMessageStore } from '@/store/modules/message' // 在左侧点击好友列表或者群聊列表中的item触发

// 在左侧点击好友列表或者群聊列表中的item触发
$bus.on('contactHomeInfo', async (val: any) => {
	homeType.value = val.listType * 1
	console.log('获取数据')
	console.log(val)
	// 根据id和类型获取点击的信息
	getContactHomeInfo(val.id, val.listType * 1)
})
const userInfoStore = useUserInfoStore()
const messageStore = useMessageStore()
const { proxy } = getCurrentInstance()
const router = useRouter()

const signDialog = ref(false)

// 是个人主页还是群聊主页
const homeType = ref<number>(0)
// 用户主页信息
const userHomeInfo = ref<IUserInfoType>({} as IUserInfoType)
// 群聊主页信息
const groupHomeInfo = ref<IGroupInfoType>({} as IGroupInfoType)
// 搜索状态,该好友是已经添加好友还是未添加好友 还是搜索到了自己
const friendState = ref<number>(0)
// 用户在群中状态 state => 0:申请中，1:已为加入该群，2:未加入群
const groupState = ref<number>(2)
// 获取用户或者群聊主页信息
const getContactHomeInfo = async (id: string, type: number) => {
	if (type === 0) {
		// 0用户
		let data = {
			_id: userInfoStore.userInfo._id,
			urlId: id
		}
		const res = await reqGetUserInfo(data)
		if (res && res.code === 200) {
			userHomeInfo.value = res.data.user
			friendState.value = res.data.friendState
		}
		console.log(friendState.value)
	} else {
		// 群主页信息
		const res: baseRes = await reqGetGroupContactHomeInfo({ userId: userInfoStore.userInfo._id, groupId: id })
		// 查看当前用户是否加入该群（state => 0:申请中，1:已为加入该群，2:未加入群）

		if (res && res.code === 200) {
			groupHomeInfo.value = res.data
			groupState.value = res.state
		}
	}
}

// 添加朋友
const handleAddFriend = async () => {
	// 用户id
	const userId = userInfoStore.userInfo._id
	// 好友id
	const friendId = userHomeInfo.value._id

	const res: baseRes = await reqAddFriend({ userId, friendId })
	if (res && res.code == 200) {
		// 发送添加好友请求
		proxy.socket.emit('apply_notice', userHomeInfo.value._id)
		friendState.value = 0
		utils.msg(res.msg, 'success')
	} else {
		utils.msg(res.msg, 'error')
	}
}

// 群聊主页按钮
const handleGroupChat = async () => {
	// 入群状态 0：申请中，1：已为加入该群，2：未加入群
	const state = groupState.value
	if (state == 0) {
		return
	} else if (state == 1) {
		// 聊天
		const userId = userInfoStore.userInfo._id
		const groupId = groupHomeInfo.value.group._id
		// 获取群聊聊天记录
		await messageStore.getGroupChatRecordsList(userId, groupId, 1)
		// pinia中暂存群信息
		const info = {
			imgUrl: groupHomeInfo.value.group.imgUrl,
			lastMsg: {
				time: new Date()
			},
			groupName: groupHomeInfo.value.group.groupName,
			type: 'groupChat',
			unreadMsgCount: 0, //未读信息数量
			_id: groupHomeInfo.value.group._id,
			userStatus: true
		}
		messageStore.saveStagingInfo(info)
		router.push({
			path: '/message',
			query: {
				type: 'group',
				id: groupHomeInfo.value.group._id,
				name: groupHomeInfo.value.group.groupName
			}
		})
	} else {
		// 申请加入群聊
		const groupId = groupHomeInfo.value.group._id
		const userId = userInfoStore.userInfo._id
		const res: baseRes = await reqAddGroup({ groupId, userId })
		if (res && res.code == 200) {
			// 通知群主我申请加入群聊 参数群主id
			proxy.socket.emit('apply_notice', groupHomeInfo.value.group.userId)
			// 申请中
			groupState.value = 0
			utils.msg(res.msg, 'success')
		} else {
			utils.msg(res.msg, 'error')
		}
	}
}

// 聊天
const handleMessage = async () => {
	// 自己的id
	const userId = userInfoStore.userInfo._id
	// 好友id
	const friendId = userHomeInfo.value._id

	// 获取和朋友聊天记录
	await messageStore.getFriendChatRecordsList(userId, friendId, 1)

	// pinia中暂存用户信息
	let info = {
		imgUrl: userHomeInfo.value.imgUrl,
		lastMsg: {
			time: new Date()
		},
		nick: userHomeInfo.value.nick,
		type: 'friendChat',
		unreadMsgCount: 0, //未读信息数
		_id: userHomeInfo.value._id,
		userStatus: true
	}
	messageStore.saveStagingInfo(info)
	router.push({
		path: '/message',
		query: {
			type: 'friend',
			id: userHomeInfo.value._id,
			name: userHomeInfo.value.nick
		}
	})
}

// 图片预览
const showPreviewImg = ref(false)
// 图片预览列表
const urlList = ref<string[]>([])

// 点击图片预览
const handlePreviewImg = (url: string) => {
	urlList.value = []
	urlList.value.push(url)
	showPreviewImg.value = true
}

// 关闭预览回调
const closePreviewImg = () => {
	urlList.value = []
	showPreviewImg.value = false
}
</script>

<style scoped lang="scss">
.chatHome {
	width: 100%;
	height: 100%;
}
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.user-pic {
		margin-top: 60px;
		img {
			width: 150px;
			height: 150px;
			border-radius: 50%;
		}
	}
	.name {
		margin: 20px 0 10px 0;
		font-size: 20px;
		font-weight: 500;
	}
	.sign {
		font-size: 13px;
		color: #b1b1b1;
		margin: 5px 0 30px;
	}
	.user-info {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #8c8c8c;

		span {
			padding: 0 10px;
		}
	}
	.pop-contact {
		display: flex;
		.message,
		.phone,
		.video,
		.add-friend {
			cursor: pointer;
			width: 25px;
			height: 25px;
			background-color: #4a89fc;
			margin: 30px 30px 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			overflow: hidden;
		}
	}

	.main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px;
		img {
			width: 40px;
			height: 40px;
		}
		.group-info-one {
			display: flex;
			align-items: center;
			padding-bottom: 40px;
			border-bottom: 1px solid #f0f2f5;
			.pic {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow: hidden;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}
			.info-left {
				width: 320px;
				padding-left: 20px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				.group-name {
					font-weight: bold;
					margin-bottom: 10px;
				}

				.group-number,
				.create-time {
					font-size: 13.5px;
					color: #999999;
					margin-bottom: 10px;
				}
			}
			.group-btn {
				width: 45px;
				height: 45px;
				background-color: #4a89fc;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				cursor: pointer;
			}
		}
		.group-sign {
			width: 100%;
			display: flex;
			margin-top: 20px;
			margin-bottom: 20px;
			padding-left: 80px;
			padding-right: 80px;
			.title {
				margin-left: 10px;
			}
			.sign-text {
				cursor: pointer;
				margin-left: auto;
			}
		}
		.group-user {
			width: 100%;
			.header {
				display: flex;
				padding: 0 80px;
				.title {
					margin-left: 10px;
				}
			}
			.group-user-list {
				margin-top: 10px;
				padding-left: 80px;
				.group-user-pic {
					width: 45px;
					height: 45px;
					border-radius: 50%;
					img {
						width: 100%;
						height: 100%;
						overflow: hidden;
						border-radius: 50%;
					}
				}
			}
		}
	}
}
</style>
